<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>用户注册</title>
    <link href="element-ui@2.15.14/lib/theme-chalk/index.css" rel="stylesheet">
    <script src="/js/vue@2.js"></script>
    <script src="element-ui@2.15.14/lib/index.js"></script>
    <script src="/js/jquery.min.js"></script>
    <script src="js/util.js" type="text/javascript"></script>
    <style type="text/css">
        body {
            background-image: url("img/bg.jpg");
        }

        #app {
            border-radius: 6px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 2rem 5rem 2rem 2rem;
            width: fit-content;
            background-color: white;
            box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
        }

        /*.photo-input {*/
        /*    border-radius: 6px;*/
        /*    padding: 1rem 2rem;*/
        /*    background-color: #409EFF;*/
        /*    border-color: #409EFF;*/
        /*}*/
    </style>
</head>
<body>
<div id="app">
    <div style="text-align: center;font-weight: bold;font-size: 30px;margin-bottom: 2rem">注册页面</div>
    <el-form :model="registerFrom" class="demo-dynamic" id="registerFrom"
             label-width="100px">
        <el-form-item label="用户名">
            <el-input name="username" v-model="registerFrom.username"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
            <el-input name="name" type="text" v-model="registerFrom.name"></el-input>
        </el-form-item>
        <el-form-item label="密码">
            <el-input name="password" type="password" v-model="registerFrom.password"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
            <el-input name="age" type="text" v-model="registerFrom.age"></el-input>
        </el-form-item>
        <el-form-item label="爱好">
            <el-checkbox-group v-model="registerFrom.checkList">
                <el-checkbox label="足球" value="football"></el-checkbox>
                <el-checkbox label="篮球" value="basketball"></el-checkbox>
                <el-checkbox label="购物" value="shop"></el-checkbox>
            </el-checkbox-group>
        </el-form-item>
        <el-form-item label="头像">
            <input class="photo-input" name="photo" placeholder="点击上传" type="file"/>
        </el-form-item>
        <el-form-item label="地区">
            <el-select @change="showCity" clearable name="province" placeholder="请选择" style="width: 7rem"
                       v-model="province">
                <el-option
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                        v-for="item in provinceList">
                </el-option>
            </el-select>
            <el-select clearable name="city" placeholder="请选择" style="width: 7rem" v-model="city">
                <el-option
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                        v-for="item in cityList">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button id="submitBtn" style="margin-top: 1rem" type="primary">提交</el-button>
        </el-form-item>
        <el-link href="login.html" style="position: absolute;right: 1rem;bottom: 2rem" type="primary">
            已有账号？立即登录
        </el-link>
    </el-form>
</div>
<script type="text/javascript">
    function goWelcome() {
        window.location = "welcome.html";
    }

    const app = new Vue({
        el: "#app",
        data: {
            registerFrom: {
                username: "",
                password: "",
                userCode: "",
                age: "",
                checkList: [],
            },
            province: "",
            provinceList: [],
            cityList: [],
            city: ""

        },
        methods: {
            showCity() {
                $.ajax({
                    type: "get",
                    url: "province?action=getCities",
                    data: {
                        code: app.$data.province
                    },
                    success: function (res) {
                        res = JSON.parse(res);
                        if (res.code == 1) {
                            app.$data.cityList = res.data;
                        } else {
                            app.$message.error(res.msg);
                        }
                    }
                })
            }
        }
    })

    showProvince();

    function showProvince() {
        $.ajax({
            type: "get",
            url: "province?action=getProvinces",
            success: function (res) {
                res = JSON.parse(res);
                if (res.code == 1) {
                    app.$data.provinceList = res.data;
                } else {
                    app.$message.error(res.msg);
                }
            }
        })
    }

    $(function () {
        //判断用户是否已登录
        let user;
        try {
            user = JSON.parse(localStorage.getItem("user"));
        } catch (error) {
            console.error("Error parsing user data:", error);
            user = undefined;
        }
        if (user != undefined && user != null) {
            location.href = 'index.html'
        }
        $("#submitBtn").click(function () {
            let formData = new FormData($("#registerFrom").get(0));
            let hobbies = "" + app.$data.registerFrom.checkList;
            if (hobbies.includes("足球")) {
                formData.append("hobbies", "football");
            }
            if (hobbies.includes("篮球")) {
                formData.append("hobbies", "basketball");
            }
            if (hobbies.includes("购物")) {
                formData.append("hobbies", "shop");
            }
            $.ajax(
                {
                    type: "post",
                    url: "student?action=doRegister",
                    data: formData,
                    async: true,
                    processData: false, // 不要让 jQuery 处理数据
                    contentType: false,
                    success: function (res) {
                        res = JSON.parse(res);
                        if (res.code == 1) {
                            app.$message({
                                message: res.msg,
                                type: 'success'
                            });
                            setTimeout(function () {
                                window.location = "index.html";
                            }, 500)
                            localStorage.setItem("user", JSON.stringify(res.data));
                        } else {
                            app.$message.error(res.msg);
                        }
                    }
                }
            )
        })
    })
</script>
</body>
</html>